<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">

    <cpn></cpn>

</div>

<template id="cpn">
    <div>
        <h>我是标题模板</h>
        <p>
            我是内容
            {{ name }}
        </p>
    </div>
</template>

<script>
    Vue.component('cpn',{
        template:'#cpn',
        data(){  //在模板定义data,要加上(){}
            return {
                //这里才是数据
                name:"这是模板变量"
            }
        }
    })

    // 创建根实例
    new Vue({
        el: '#app',
        data:{
            name:"蔡黎明",

        }
    })
</script>
</body>
</html>